<template>
    <el-page-header icon="ArrowLeft" @back="goBack">
        <template #content>
            <span> 编辑通知 </span>
        </template>
    </el-page-header>
    <el-form :model="form" label-width="120px" :rules="rules" status-icon ref="ruleFormRef">
        <!-- 通知类型 -->
        <el-form-item label="通知类型:" prop="typeId">
            <el-select v-model="form.typeId" placeholder=" ">
                <el-option v-for="item, index in storeinfo.date" :value="item.typeId" />
            </el-select>
        </el-form-item>
        <!-- 发布范围 -->
        <el-form-item label="发布范围:" prop="range">
            <div class="box">
                <el-radio-group v-model="radio">
                    <el-radio :label="1">全部学校</el-radio>
                    <el-radio :label="2">指定学校</el-radio>
                    <el-radio :label="3">指定学段</el-radio>
                </el-radio-group>
            </div>
        </el-form-item>
        <!-- 发布对象-->
        <!-- <el-form-item label="发布对象">
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="老师" name="type" />
                <el-checkbox label="学生" name="type" />
                <el-checkbox label="家长" name="type" />
            </el-checkbox-group>
        </el-form-item> -->
        <div class="publishbox">
            <el-form-item label="详情:" prop="detail">
                <el-input v-model="form.detail" size="default" placeholder="请输入详情数据" />
            </el-form-item>
            <el-form-item label="通知:" prop="priority">
                <el-select v-model="form.priority" placeholder="">
                    <el-option label="低级通知" value="1" />
                    <el-option label="高级通知" value="2" />
                    <el-option label="紧急通知" value="3" />
                </el-select>
            </el-form-item>
        </div>
        <!-- 时间 -->
        <el-form-item label="定时发布:">
            <el-switch size="large" v-model="form" inline-prompt active-text="开启" inactive-text="关闭" />
            <el-date-picker v-if="form" v-model="form" type="datetime" start-placeholder="日期" end-placeholder="时间"
                placeholder="发布时间" format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD h:m:s a" />
        </el-form-item>
        <!-- 输入标题 -->
        <el-form-item label="通知标题:" prop="title">
            <el-input class="publish" v-model="form.title" size="default" placeholder="请输入标题" />
        </el-form-item>
        <!-- 通知内容 -->
        <el-form-item label="通知内容:">
            <el-input v-model="form" size="default" placeholder="word文挡" />
        </el-form-item>
        <el-form-item label="封面:" class="img">
            <el-button class="imgbutton">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-button>
            <el-image style="width: 70px; height: 70px"
                src='https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg' fit="fit" />
        </el-form-item>
        <el-form-item label="附件:" class="file">
            <el-button type="success">文件上传</el-button>
            <span class="description">
                最多上传5份附件,支持附件格式:Word、Excel、PPT、PDF、JPG,附件大小:需小于50Mb
            </span>
        </el-form-item>
        <el-form-item>
            <div class="button">
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    发布
                </el-button>
            </div>
        </el-form-item>

    </el-form>
</template>

<script   setup lang="ts" >
import router from '@/router'
import server from '@/api'
import { ElNotification } from 'element-plus';
import { useBureau } from '../stores/Burean'
import { ref, onMounted } from 'vue';
const ruleFormRef = ref()
var radio = ref("")
const store: any = useBureau()
const storeinfo: any = ref({})
const form: any = ref({
    typeId: '',//通知类型Id 在另一个接口中
    priority: '',//通知优先级
    detail: '',// 通知详情
    title: '',//通知标题
})
//验证规则
const rules: any = ref({
    typeId: [{ required: true, message: '请输入通知类型', trigger: 'change' }],
    priority: [{ required: true, message: '请输入通知优先级', trigger: 'change' }],
    detail: [{ required: true, message: '请输入通知详情', trigger: 'change' }],
    title: [{ required: true, message: '请输入标题', trigger: 'change' }],
})
//点击返回
const goBack = () => {
    router.back()
}

onMounted(async () => {
    let res = await server.BureauSchool.getAllInformByPage()
    //存类型数据
    // console.log(res.data.data);
    store.save_useBureau(res.data.data);
    storeinfo.value = store.useBureau
    // console.log(storeinfo.value.date);
})
//发布
const submitForm = async (formEl: any) => {
    await formEl.validate(async (valid: any) => {
        if (valid) {
            let res = await server.BureauSchool.saveAllInform(form.value)
            // console.log(form.value);
            if (res.data.code == 200) {
                ElNotification.success({ message: '增加通知成功' });
            } else {
                ElNotification.success({ message: '增加失败,出现异常了,请联系相关人员' });
            }
        } else {
            ElNotification.success({ message: '请先填写你要发布的通知' });
        }
    })
}

</script>


<style  lang="scss">
.el-page-header {
    height: 80px;
    background-color: white;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    box-shadow: 1px 1px 10px;
    margin-bottom: 40px;
    box-shadow: 1px 5px 20px;

}

.el-form {
    .el-switch {
        margin-right: 10px;
    }

    .publishbox {
        display: flex;
    }

    .publish {
        width: 220px;
        margin-right: 20px;
    }

    .button {
        width: calc(100% + 120px);
        display: flex;
        justify-content: center;
        margin-left: -120px;
    }

    .img {
        align-items: center;

        .imgbutton {
            width: 70px;
            height: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 30px;

            .el-icon {
                width: 60px;
                height: 60px;
                font-size: 40px;
            }
        }
    }

    .file {
        .description {
            font-size: 12px;
            color: rgba(58, 57, 58);
            margin-left: 20px;
        }
    }


}
</style>